<template>
  <Left_box>
    <Box :height="205" class="contentBox">
      <Lease_title>经济</Lease_title>
      <div class="row-content">
        <div class="traffic-data">
          <div class="row">
            <div class="traffic-item">
              <IconBox width="41" height="41">
                <img src="@/assets/images/panel/icon_gdp@2x.png" />
              </IconBox>
              <div class="traffic-content">
                <div class="label">GDP总额</div>
                <div class="value">
                  23958.3
                  <div class="suffix">亿元</div>
                </div>
              </div>
            </div>
            <div class="traffic-item">
              <IconBox width="34" height="34">
                <img src="@/assets/images/panel/icon_income@2x.png" />
              </IconBox>
              <div class="traffic-content">
                <div class="label">居民人均收入</div>
                <div class="value">
                  7.6
                  <div class="suffix">万元</div>
                </div>
              </div>
            </div>
            <div class="traffic-item">
              <IconBox width="34" height="34">
                <img src="@/assets/images/panel/icon_traffic@2x.png" />
              </IconBox>
              <div class="traffic-content">
                <div class="label">固定资产投资</div>
                <div class="value">
                  5744.2
                  <div class="suffix">亿元</div>
                </div>
              </div>
            </div>
            <div class="traffic-item">
              <IconBox width="34" height="34">
                <img src="@/assets/images/panel/icon_stuck@2x.png" />
              </IconBox>
              <div class="traffic-content">
                <div class="label">全市税收收入</div>
                <div class="value">
                  2303
                  <div class="suffix">亿元</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Box>
    <Box :height="470" class="contentBox1">
      <Lease_title>各区面积概况(km²)</Lease_title>
      <V3Echarts :options="option2()" container="emergencylbox2" :height="450" :width="500"></V3Echarts>
    </Box>
    <Box :height="370" class="contentBox">
      <Lease_title>各区GDP TOP6(亿元)</Lease_title>
      <V3Echarts :options="option3()" container="emergencylbox2" :height="300" :width="430"></V3Echarts>
    </Box>
  </Left_box>
</template>
<script lang="ts" setup>
import Left_box from '@/components/left_box.vue'
import Lease_title from '@/components/Lease_title/index.vue'
import Box from '@/components/Box/index.vue'
import V3Echarts from '@/components/V3Echarts/index.vue'
import IconBox from '@/components/IconBox/index.vue'
import { option2, option3 } from '../options/index'
</script>
<style lang="scss" scoped>
.box {
  @include MarginBottom(15);
}
.contentBox {
  @include Padding(15, 0, 0, 0);
}
.row-content {
  display: flex;

  .traffic-data {
    @include Padding(16, 0, 0, 0);
    width: 100%;

    .row {
      display: flex;
      flex-wrap: wrap;
      @include Padding(15, 15, 15, 15);
      justify-content: space-between;
      .traffic-item {
        display: flex;
        @include MarginRight(29);

        &:last-child {
          margin-right: 0;
        }

        .traffic-content {
          display: flex;
          flex-direction: column;
          @include MarginLeft(11);

          .label {
            @include FontSize(14);
            color: #ffffff;
            @include MarginBottom(5);
          }

          .value {
            @include FontSize(26);
            color: #00ffff;
            display: flex;
            font-family: Tencent, serif;

            .suffix {
              @include FontSize(16);
              justify-self: flex-end;
              align-self: flex-end;
              color: #93c0ec;
              @include MarginLeft(12.7);
              font-family: Oppo, serif;
            }
          }
        }
      }

      .traffic-item:first-child {
        @include MarginBottom(25);
      }
    }
  }
  .content1 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    @include MarginTop(30);
    .content1-item {
      text-align: center;
      @include MarginBottom(0);
      @include MarginTop(8);
      @include MarginLeft(20);
      @include MarginRight(10);
      @include wHeight(50);
      @include Width(120);
      @include Padding(0, 0, 0, 10);
      // width: 45%;
      .num {
        color: #00aeff;
        @include FontSize(20);
        font-weight: 800;
        @include MarginRight(15);
      }
      span {
        opacity: 0.5;
        font-family: SJyunhei-Regular;
        font-weight: 400;
        @include FontSize(16);
        @include LetterSpacing(1.5);
        color: #ffffff;
        flex: left;
      }
      > div {
        display: flex;
        justify-content: space-between;
        font-family: SJyunhei;
        font-weight: 400;
        @include FontSize(20);
        color: #ffffff;
        @include MarginBottom(2);
        align-items: center;
        img {
          @include Width(36);
          @include wHeight(36);
        }
      }
    }
  }
}
</style>
